---
id: card
title: Card
---

import Playground from '@theme/Playground';
import './card.styles.css';

## Simple Card

<Playground
  componentContainerProps={{
    className: 'card-demo-container',
  }}>
  <div class="card-demo">
    <div class="card">
      <div class="card__header">
        <h3>Lorem Ipsum</h3>
      </div>
      <div class="card__body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
          suspendisse ultrices gravida.
        </p>
      </div>
      <div class="card__footer">
        <button class="button button--secondary button--block">See All</button>
      </div>
    </div>
  </div>
</Playground>

## Feed Item

<Playground
  componentContainerProps={{
    className: 'card-demo-container',
  }}>
  <div class="card-demo">
    <div class="card">
      <div class="card__header">
        <div class="avatar">
          <img
            class="avatar__photo"
            src="https://avatars1.githubusercontent.com/u/4060187?s=460&v=4"
          />
          <div class="avatar__intro">
            <h4 class="avatar__name">Jared Palmer</h4>
            <small class="avatar__subtitle">
              Consultant, Speaker, Lead Engineer
            </small>
          </div>
        </div>
      </div>
      <div class="card__image">
        <img
          src="https://images.unsplash.com/photo-1501619951397-5ba40d0f75da?ixlib=rb-1.2.1&auto=format&fit=crop&w=1655&q=80"
          alt="Image alt text"
          title="Logo Title Text 1"
        />
      </div>
      <div class="card__footer">
        <div class="button-group button-group--block">
          <button class="button button--secondary">Like</button>
          <button class="button button--secondary">Comment</button>
          <button class="button button--secondary">Share</button>
        </div>
      </div>
    </div>
  </div>
</Playground>

## Photo-centric

<Playground
  componentContainerProps={{
    className: 'card-demo-container',
  }}>
  <div class="card-demo">
    <div class="card">
      <div class="card__image">
        <img
          src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
          alt="Image alt text"
          title="Logo Title Text 1"
        />
      </div>
      <div class="card__body">
        <h4>Quaco Lighthouse</h4>
        <small>
          The Quaco Head Lighthouse is a well maintained lighthouse close to St.
          Martins. It is a short, beautiful walk to the lighthouse along the
          seashore.
        </small>
      </div>
      <div class="card__footer">
        <button class="button button--primary button--block">Visit</button>
      </div>
    </div>
  </div>
</Playground>
